<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
</head>
<body>
       <!-- 
        事件 ： js 使我们有能力创建动态页面，而事件是可以被js侦测到的行为
            简单理解 ： 触发 --响应机制 
        -->
        <button id="btn">赵哲</button>
        <script>
            // 点击按钮 弹出对话框
            // 1 事件由由 三部分 组成  事件源 事件类型 事件处理程序  我们也称为 事件三要素
                    // 事件源 事件触发的对象   谁 按钮
                    var btn = document.getElementById('btn');
                    // 事件类型  如何触发 比如 鼠标点击 （onclick）  还是鼠标经过 还是键盘按下
                    // 事件处理程序  通过一个函数赋值的方式完成
                    btn.onclick = function(){
                        alert('我爱你')
                    }
            
            
        </script>

                <!-- 执行事件的步骤：
                1 获取事件源
                2 注册事件 （绑定事件）
                3 添加事件处理程序（采用函数赋值形式） 要做什么放到函数里面去 -->

                <div>123</div>
                <script>
                    // 1 获取事件源
                    var div = document.querySelector('div');
                    // 2 绑定事件
                    // div.onclick 
                    // 3 添加事件处理程序
                    div.onclick = function(){
                        console.log('我被选中了');
                    }

                </script>


    </body>          
</html>